<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>火车票订单-阿里旅行</title>

    <style>

    </style>
</head>
<body>
<div class="header">
    <div class="header-content">
        <h1>
            <a href="//www.fliggy.com" title="飞猪" class="header-logo-link">飞猪</a>
            <s class="header-point"></s><strong class="header-logo-huochepiao">
            <a href="//train.alitrip.com/stsSearch.htm" title="火车票" class="火车票">火车票</a>
        </strong>
            <span class="steps">
                <span class="step">1</span><span>填写订单</span>
                <span class="step" style="background-color: #ccc">2</span><span>确认订单</span>
                <span class="step" style="background-color: #ccc">3</span><span>支付并完成</span>
            </span>

        </h1>
    </div>
</div>
<article>
    <div class="traininfo">
        <div class="bd" data-spm-anchor-id="0.0.0.i12.29995faeTYfzNs">
            <table>
                <tbody>
                <tr>
                    <td class="train-depart">
                        <header class="trinfo-head"><span class="station">南充</span>
                            <span class="text">出发</span>
                        </header>
                        <div class="date-time clearfix">
                            <div class="date-time-cont clearfix"><span class="date">2018年<br>9月8日</span>
                                <span class="time">02:22</span>
                            </div>
                        </div>
                    </td>
                    <td class="train-info">
                        <ul class="train-info-list">
                            <li class="train-meta"><span class="train-type">新空快速</span>
                                <span class="train-num">K352</span>
                            </li>
                            <li class="trinfo-sprite trinfo-split"></li>
                            <li class="time-cost"><i class="trinfo-sprite clock-icon"></i>
                                <span>01时54分</span>
                            </li>
                        </ul>
                    </td>
                    <td class="train-arrive">
                        <header class="trinfo-head"><span class="station">达州</span>
                            <span class="text">到达</span>
                        </header>
                        <div class="date-time clearfix">
                            <div class="date-time-cont clearfix"><span class="date">2018年<br>9月8日</span>
                                <span class="time">04:16</span>
                            </div>
                        </div>
                    </td>
                    <td class="seat-type-wrap confirm-info-td">
                        <header class="trinfo-head">座席类型</header>
                        <div class="seat-type-icon confirm-info-cont  clearfix">
                            <span class="trinfo-sprite J_SeatType seat-seat">硬座</span>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="seat">
        <h3>第一步:选择座席</h3>
        <div class="clearfix">
            <div class="seat-item">
                <label><input type="radio" name="seat-type" value="0">无座</label>
                <span class="seat-price">¥32.5</span>
                <span class="few-tip">少量</span>
                <span class="soldout-tip">（无票）</span>
                <span class="checking-tip">验票中..</span><i></i>
            </div>
            <div class="seat-item">
                <label><input type="radio" name="seat-type" value="1">硬座</label>
                <span class="seat-price">¥32.5</span>
                <span class="few-tip">少量</span>
                <span class="soldout-tip">（无票）</span>
                <span class="checking-tip">验票中..</span><i></i>
            </div>
        </div>
        <p class="tips">卧铺上中下铺位是随机的，预订暂收下铺价格，出票后根据实际票价退差价。</p>
    </div>
    <div class="passenger">
        <div>
            <h3>第二步:填写乘客信息</h3>
            <table>
                <tr>
                    <td class="label_">姓名：</td>
                    <td><span class="star">*</span></td>
                    <td><input type="text" name="name"/></td>
                </tr>
                <tr>
                    <td class="label_">证件类型：</td>
                    <td><span class="star">*</span></td>
                    <td>
                        <select name="cardType">
                            <option value="identity">身份证</option>
                            <option value="passport">护照</option>
                            <option value="huixiang">港澳通行证</option>
                            <option value="taibao">台湾通行证</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="label_">证件号码：</td>
                    <td><span class="star">*</span></td>
                    <td><input type="text" name="cardNo"/></td>
                </tr>
                <tr>
                    <td class="label_">生日：</td>
                    <td><span class="star">*</span></td>
                    <td><input type="date" name="birth"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2">
                        <button>添加乘客</button>
                    </td>
                </tr>
            </table>
        </div>
        <hr style="border-color: lightgrey"/>
        <div class="connection">
            <h3>第三步:填写联系人信息</h3>
            <table>
                <tr>
                    <td class="label_">姓名：</td>
                    <td><span class="star">*</span></td>
                    <td><input type="text" name="contacts"/></td>
                </tr>
                <tr>
                    <td class="label_">手机号码：</td>
                    <td><span class="star">*</span></td>
                    <td><input type="text" name="tel"/></td>
                </tr>
                <tr>
                    <td class="label_">电子邮箱：</td>
                    <td><span></span></td>
                    <td><input type="text" name="email"/></td>
                </tr>
            </table>
        </div>
        <br/>
        <div>
            <h3>第五步:购买须知</h3>
            <div style="padding-left:50px">
                <p style="color: red;">1、火车票无法保证100%出票，请您谅解！</p>
                <p>2、出票失败后，将短信通知，票款退回至您的支付宝中。</p>
                <p>3、卧铺铺位是随机分配的，预定时暂收下铺价格，出票成功后会根据实际票价退还差价。</p>
            </div>
        </div>
        <div class="summary" style="padding-left:50px;margin-top: 50px">
            <p>订单总金额：<span id="summary">¥0</span></p>
            <p style="line-height: 32px">
                <a onclick="alert('ok')"
                   style="padding:7px 10px;background: #0092d2;cursor: pointer;text-decoration: none;line-height: 32px">
                    <span style="color: #fff;margin: 0 10px 0 20px;font-size: 16px;font-weight: 700;">下一步</span>
                    <span style="color: #fff;font-size: 12px;font-weight: 400;margin-right: 20px;">确认订单</span>
                </a>
            </p>
        </div>
    </div>
</article>

</body>
</html>
